<template>
  <baidu-map
    class="map"
    :center="center"
    :zoom="zoom"
    scroll-wheel-zoom
    @ready="handler"
    @moving="syncCenterAndZoom"
    @moveend="syncCenterAndZoom"
    @zoomend="syncCenterAndZoom"
    @rightclick="rightclick"
  >
    <div class="box-01">
      <el-button type="primary" @click="openMarker">打开点</el-button>
      <el-button type="primary" @click="openCircle">打开圆</el-button>
    </div>
    <bm-view style="width: 100%; height: 100%; flex: 1"></bm-view>
    <bm-marker
      :position="{ lng: marker.center.lng, lat: marker.center.lat }"
      :dragging="true"
      animation="BMAP_ANIMATION_BOUNCE"
      v-if="marker.show"
    >
      <bm-label
        content="按住拖拽,单击确认放点"
        :labelStyle="{ color: 'red', fontSize: '12px' }"
        :offset="{ width: -15, height: 30 }"
      />
    </bm-marker>
    <bm-info-window
      :position="{ lng: infoWindow.center.lng, lat: infoWindow.center.lat }"
      title="添加点"
      :show="infoWindow.show"
      @close="infoWindowClose"
      @open="infoWindowOpen"
    >
      <el-tooltip
        class="item"
        effect="dark"
        content="Top Left 提示文字"
        placement="top-start"
      >
        <el-button>上左</el-button>
      </el-tooltip>
    </bm-info-window>
    <bm-circle
      v-if="circlePath.show"
      :center="circlePath.center"
      :radius="circlePath.radius"
      stroke-color="blue"
      :stroke-opacity="0.5"
      :stroke-weight="2"
      @lineupdate="updateCirclePath"
      :editing="true"
    ></bm-circle>
  </baidu-map>
</template>
<script>
export default {
  data() {
    return {
      center: { lng: 0, lat: 0 },
      zoom: 3,
      marker: {
        show: false,
        center: { lng: 0, lat: 0 },
      },
      infoWindow: {
        show: false,
        center: { lng: 0, lat: 0 },
      },
      circlePath: {
        show: false,
        center: { lng: 0, lat: 0 },
        radius: 500,
      },
    };
  },
  methods: {
    handler({ BMap, map }) {
      this.center.lng = 116.404;
      this.center.lat = 39.915;
      this.zoom = 15;
    },
    infoWindowClose(e) {
      this.infoWindow.show = false;
    },
    infoWindowOpen(e) {
      this.infoWindow.show = true;
    },
    openMarker() {
      this.marker.center.lng = this.center.lng;
      this.marker.center.lat = this.center.lat;
    },
    syncCenterAndZoom(e) {
      const { lng, lat } = e.target.getCenter();
      this.center.lng = lng;
      this.center.lat = lat;
      this.zoom = e.target.getZoom();
    },
    rightclick({ type, target, point, pixel, overlay }) {
      console.log(this.circlePath);
      const { lng, lat } = point;
      this.infoWindow.center.lng = lng;
      this.infoWindow.center.lat = lat;
      this.infoWindow.show = true;
    },
    openCircle() {
      this.circlePath.center.lng = this.center.lng;
      this.circlePath.center.lat = this.center.lat;
      setTimeout(() => {
        this.circlePath.show = true;
      }, 1000);
    },
    updateCirclePath(e) {
      console.log(e.target.getRadius());
      let sf = {
        lng: e.target.getCenter().lng,
        lat: e.target.getCenter().lat,
        radius: e.target.getRadius(),
      }
      console.log(sf);
      return
    },
  },
};
</script>

<style lang="scss" scoped>
.map {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 0;
  .box-01 {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    width: 300px;
    height: 80%;
    overflow: hidden auto;
    background: rgba($color: #000000, $alpha: 0.4);
    opacity: 0.1;
    cursor: pointer;
    transition: opacity 0.3s;
    padding: 10px;
    box-sizing: border-box;
    &:hover {
      opacity: 1;
    }
  }
}
</style>